<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="datetime">选择日期和时间</label>
    <input type="datetime-local" id="datetime"/>
    <div id="countdown"></div>
    <script>
        //获取时间日期输入框对应的DOM元素
        let datetimePicker = document.getElementById('datetime');
        //获取倒计时信息框的DOM元素
        let countdown = document.getElementById('countdown');
        //增加值改变的事件监听，当日期时间发生改变的时候执行回调
        datetimePicker.addEventListener('change',(event)=>{
            //根据选择的日期时间创建一个日期的实例
            let targetDate = new Date(event.target.value);
            setInterval(()=>updateCountdown(targetDate),1000);
        });
        function updateCountdown(targetDate){
            //因为客户端的时间可能是不正确的，所以需要从服务器获取时间
            //创建实例
            let xhr = new XMLHttpRequest();
            //打开连接 指定请求的方法，请求的路径，是否异步
            //有时候我们只需要拿到服务器返回的响应头就可以了，不需要响应体
            xhr.open('HEAD','/',true);
            //xhr.onreadystatechange readyState=4 status=200
            xhr.onload = ()=>{
                //获取服务器返回的响应头 响应日期
                const responseDate = new Date(xhr.getResponseHeader('Date'));
                //用目标时间减去响应的时间，就是差值，单位毫秒数
                let diff = targetDate - responseDate;
                if(diff>0){
                    let seconds = Math.floor((diff/1000)%60);//差多少秒
                    let minutes = Math.floor((diff/(1000*60))%60);//差多少分钟
                    let hours = Math.floor((diff/(1000*60*60))%24);//差多少小时
                    let desc= '';
                    if(hours){
                        desc += `${hours}时`;
                    }
                    if(minutes){
                        desc += `${minutes}分`;
                    }
                    if(seconds){
                        desc += `${seconds}秒`;
                    }
                    countdown.innerHTML= desc;
                }
            }
            xhr.send();
        }
    </script>
</body>
</html>